<template>
    <div>
        <t-header></t-header>
        <div class="acticle-wrap">
            <div class="w">
                <div class="acticle-list" v-if="acticleData != ''">
                    <div 
                    :key="index"
                    v-for="(item, index) in acticleData"
                    @click="showActiclePrivece(item._id)" class="list-item">
                        <div class="item-title">{{item.title}}</div>
                    </div>
                </div>
                <!-- 分页 -->
                <div class="page-wrap">
                    <el-pagination
                        background
                        @current-change="handlChange"
                        :page-size="sizeA"
                        :current-page="pageA"
                        layout="prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
                <el-input v-model="acticleTitle" placeholder="请输入文章标题"></el-input>
                <div id="editor"></div>
                <el-button @click="submitActicle" type="primary">发布文章</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import Header from '../components/global/Header';
import E from 'wangeditor';
import { ref, onMounted, reactive, toRefs } from '@vue/composition-api';
import axios from 'axios';
import jquery from 'jquery';
export default {
    components: {
        't-header': Header
    },
    setup(props, context) {
        axios.defaults.baseURL = 'http://47.105.157.158:3000';
        // 编辑器对象
        const editor = ref('');

        onMounted(() => {
            editor.value = new E('#editor');
            // 自定义菜单配置
            editor.value.customConfig.menus = [
                'head',  // 标题
                'bold',  // 粗体
                'fontSize',  // 字号
                'fontName',  // 字体
                'italic',  // 斜体
                'underline',  // 下划线
                'strikeThrough',  // 删除线
                'foreColor',  // 文字颜色
                'backColor',  // 背景颜色
                'link',  // 插入链接
                'list',  // 列表
                'justify',  // 对齐方式
                'quote',  // 引用
                'emoticon',  // 表情
                'image',  // 插入图片
                'table',  // 表格
                'video',  // 插入视频
                'code',  // 插入代码
                'undo',  // 撤销
                'redo'  // 重复
            ];
            // 配置上传图片的服务器地址
            editor.value.customConfig.uploadImgServer = 'http://47.105.157.158:3000/upload/acticle/img';
            // 将图片大小限制为 3M
            editor.value.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;

            //change事件，当富文本编辑器内容发生变化时便会触发此函数
            editor.value.customConfig.onchange = function (text) {
                inputText.value = text;
            };

            editor.value.customConfig.customUploadImg = function (files, insert) {
                // files 是 input 中选中的文件列表
                // insert 是获取图片 url 后，插入到编辑器的方法
                let formData = new FormData();
                formData.append('acticle', files[0]);
                jquery.ajax({
                    type: 'post',
                    url: 'http://47.105.157.158:3000/upload/acticle/img',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        insert('http://47.105.157.158:3000/images/upload/' + response.path);
                    }
                });
                // console.log(insert);
                // 上传代码返回结果之后，将图片插入到编辑器中
                // insert(imgUrl)
            }

            getActicleData(1,3);

            // 创建实体
            editor.value.create();
            
        })

        
        // 显示文章详情
        const showActiclePrivece = function (id) {
            context.parent.$router.push(`/acticle/${id}`);
        }

        // 文章内容
        const inputText = ref('');
        // 文章标题
        const acticleTitle = ref('');
        
        // 发布文章
        const submitActicle = async function () {
            // 判断有没有再登录
            if (!window.localStorage.getItem('token'))
                return context.parent.$message.error('请先登录后，再发布文章');
            // 判断内容是否为空
            if (inputText.value.trim().length == 0)
                return context.parent.$message.error('文章内容不允许为空');
            // 判断标题是否为空
            if (acticleTitle.value.trim().length == 0)
                return context.parent.$message.error('文章标题不能为空');

            // 先获取发布者的信息
            let { data: user } = await axios.get(`/user/login/${window.localStorage.getItem('token')}`);
            if (user.status != 200)
                return context.parent.$message.error('请重新登录后，再发布文章');
            
            // 上传
            let response = {
                text: inputText.value,
                title: acticleTitle.value,
                user: user.user
            }
            let { data: res } = await axios.post('/user/acticle', response);
            if (res.status != 200)
                return context.parent.$message.error('文章发布失败，遇到未知错误，请重新尝试');
            context.parent.$message.success('文章发布成功');
            setTimeout(function () {
                location.reload();
            }, 2000)
        }

        // 查询参数
        const total = ref(0);
        const pageA = ref(0);
        const sizeA = ref(0);
        // 文章数据列表
        const acticleData = ref('');
        // 获取文章数据列表
        const getActicleData = async function (page, size) {
            let { data: res } = await axios.get(`/user/acticle/${page}/${size}`);
            if (res.status != 200)
                return context.parent.$message.error('获取文章列表数据失败，请刷新重试');
            total.value = res.data.total;
            pageA.value = res.data.page;
            sizeA.value = res.data.size;
            acticleData.value = res.data.records;
        } 

        // 页数改变时触发
        const handlChange = function (currentPage) {
            pageA.value = currentPage;
            getActicleData(pageA.value, sizeA.value);
        }


        const methods = { handlChange, showActiclePrivece,submitActicle }

        return {
            ...methods,
            editor,
            acticleTitle,
            total,
            pageA,
            sizeA,
            acticleData
        }
    }
}
</script>

<style lang="less" scoped>

.el-button {
    margin-top: 12px;
}
.acticle-wrap {
    margin-top: 40px;
}

.el-pagination {
    margin-top: 20px;
}

.page-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.acticle-list {
    display: flex;
    flex-direction: column;
    height: 400px;
    .list-item {
        position: relative;
        flex: 1;
        margin-bottom: 8px;
        background-color: #fff;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 0 10px pink;
        .item-title {
            position: absolute;
            left: 50%;
            top: 50%;
            font-size: 20px;
            font-weight: 700;
            color: #999;
            transform: translate(-50%, -50%);
        }
    }
}
</style>